<!--头部公共部分-->
{include file="common/header" /}

<div id="wodekehu" class="x-body" class="clear:both;">
    <div class="layui-row"
         style="padding-left:20px;border-left:1px solid #e5e5e5;border-right:1px solid #e5e5e5;">
        <div class="layui-form layui-col-md12 x-so layui-form-pane">
            <div class="layui-input-inline">
                <input type="text" name="course_name" placeholder="课程名称" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-input-inline">
                <button class="layui-btn" id="search">
                    <i class="layui-icon layui-icon-search"></i>筛选</button>
                <button class="layui-btn layui-btn-warm" id="clear">
                    <i class="layui-icon"></i>重置</button>

            </div>
        </div>

    </div>

    <div class="layui-input-inline" style="margin-top: 30px;">
        <button class="layui-btn layui-btn-normal" id="table-add"><i class="layui-icon layui-icon-add-circle"></i>新增课程</button>
        <button class="layui-btn  layui-btn-danger" id="del"><i class="layui-icon"></i> 删除</button>
    </div>
    <table class="layui-table" id="datalist" lay-filter="Event"></table>
    <script type="text/html" id="name">
        <a lay-event="see_info_course" class="layui-table-link">{{ d.course_name }}</a>
        <!--
        <a href="/admin/course/edit/id/{{d.id}}" id="test" class="layui-table-link">{{ d.course_name }}</a>
           -->
</script>
    <script type="text/html" id="switchTpl">
        <input type="checkbox" name="status" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="sexDemo" {{ d.status == 0 ? '' : 'checked' }}>
    </script>
</div>
<!--底部公共部分-->
{include file="common/footer" /}
<script>
    layui.use(['table','form','element', 'laydate', 'layer'], function () {
        let table = layui.table,
            laydate = layui.laydate,
            form = layui.form,
            element = layui.element,
            layer = layui.layer,
            $ = layui.$;

        let loading = layer.load();

        $("#table-add").click(function () {
            location.href = "{:url('Course/add')}";
        })
        //日期
        laydate.render({
            elem: '#start',
            type: 'date'
            ,trigger: 'click'
        });

        //方法级渲染
        let tableIns = table.render({
            elem: '#datalist'
            , url: '{:url("Course/lists")}'
            , method: 'POST'
            , loading: true
            , parseData: function (res) { //res 即为原始返回的数据
            if (res.code === 1) {
                res.code = 0;
            } else {
                res.code = -1;
            }
            return {
                "code": res.code, //解析接口状态
                "msg": res.message, //解析提示文本
                "count": res.data.total, //解析数据长度
                "data": res.data.data //解析数据列表
            };
            },
            cols: [[
                {type: 'checkbox'},
                {field: 'course_name', title: '课程名称', style:'color:#01AAED;font-weight: bold;cursor: pointer;',  minWidth: 350,align: 'center', templet: '#name'},
                {field: 'price', title: '单价', width: 80,align: 'center'},
                {field: 'unit', title: '单位', width: 80,align: 'center'},
                {field: 'student_grade', title: '年级', width: 80,align: 'center'},
                {field: 'subject', title: '科目', width: 80,align: 'center'},
                {field: 'course_type', title: '班型', width: 100,align: 'center'},
                {field: 'cost_type', title: '收费规则', width: 100,align: 'center'},
                {field: 'stage_charge', title: '按期收费', width: 100,align: 'center'},
                {field: 'status', title: '状态', width: 100, templet: '#switchTpl',align: 'center'},
           //     {field: 'campus_num', title : '<span title="只有将课程授权给校区后,被授权校区才能对该课程收费">授权<sup>  <span class="layui-badge-dot" style="position: relative; top: -3px; left: -3px;"></span></sup></span>',width: 100,align: 'center'},
            ]]
            , height: 'full-180'
            , page: true
            , done: function () {
                layer.close(loading);
             }
        });

        //监听工具条
        table.on('tool(Event)', function (obj) {
            var data = obj.data; //获得当前行数据

            var layEvent = obj.event; //获得 lay-event 对应的值
            var tr = obj.tr; //获得当前行 tr 的DOM对象
            if(layEvent === 'see_info_course'){
                //弹出新的界面

                /*
                layer.open({
                    type: 2,
                    title:'',
                    closeBtn: 2,
                    area: ['95%', '90%'],
                    shadeClose: false,
                    content: "{:url('grades/grades_course')}?course_id="+data.id,
                    end:function () {

                        tableIns.reload();
                    }
                });
                */


                location.href = "{:url('grades/grades_course')}?course_id="+data.id +'&campus_id='+data.campus_id;

            }
        });


        form.on('switch(sexDemo)', function(obj){
            console.log(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis)
            let status;
            if (obj.elem.checked == true) {
                status = 1;
            } else {
                status = 0;
            }
            //激活与禁用状态改变
            $.post("{:url('Course/course_check_status')}", {
                id: this.value,
                status: status
            }, function (rJson) {
                if (rJson.code === 0) {
                    layer.msg(rJson.msg, {
                        time: 2000
                    });
                    setTimeout(function () {
                        tableIns.reload();
                    }, 1000)
                } else {
                    layer.msg(rJson.msg, {
                        icon: 2,
                        time: 1000
                    });
                }
            }, "json")
        });

        $('#del').click(function () {
            let checkStatus = table.checkStatus('datalist'); //test即为基础参数id对应的值
            if (checkStatus.data.length == 0) {
                layer.msg('请至少选择一条数据！');
                return false;
            }
            let checked_ids = [];
            let file_id= 0;
            for (let index = 0; index < checkStatus.data.length; index++) {
                const element = checkStatus.data[index];
                checked_ids.push(element.id)
                file_id = element.file_id;
            }
            let data ={"ids":checked_ids.join(',')};
            console.log(data);
            let url = "{:url('Course/del')}";
            layer.confirm('确认是否删除该课程?', function () {
                $.post(url,data,function(response){
                    layer.msg(response.msg);
                    if(response.code === 1){
                        tableIns.reload();
                    }
                });
            });
        });

        //搜索项
        $('#search').click(function () {
            let field = {};
            field.course_name = $('input[name=course_name]').val();
            console.log(field);
            tableIns.reload({
                where: field,
                method: 'POST',
                page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
        });
        //清除
        $('#clear').click(function () {
            $('.layui-form-pane').find('.layui-input-inline').each(function (index, element) {
                $(element).find('input[type=text]').val('');
                $(element).find('select').val('');
            })
            tableIns.reload({
                where: {
                    'course_name': '',
                },
                page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
        });
    });
</script>

